<template>
    <el-row :gutter="20" class="mt-100px">
        <el-col :span="8" :offset="7">
            <p class="text-center">修改密码</p>
            <el-form size="mini" status-icon ref="ruleForm" label-width="100px">
                <el-form-item label="旧密码" prop="password">
                    <el-input type="password" v-model="param.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password2">
                    <el-input type="password" v-model="param.password2" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="npassword">
                    <el-input type="password" v-model="param.npassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </el-col>
    </el-row>

</template>
<script>
import { useLoginStore } from '../../store';
import { AdminUserApi } from '../../api/admin-user';
const api = new AdminUserApi;
export default {
    name: "ChangePassword",
    data() {
        return {
            param: {
                username: '',
                password: '',
                password2: '',
                npassword: '',
            }
        }
    },
    mounted() {
        const store = useLoginStore();
        this.param.username = store.logonId;
    },
    methods: {
        async submitForm(formName) {
            const result = await api.changePassword({ ...this.param });
            this.$message.info({ message: result.message, duration: 1500 });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }

}
</script>